<template>
  <div>
    <!-- 顶部标题 -->
    <p class="router-top-info">党员微积分权限管理中心</p>
    <!-- 中间内容 -->
    <div class="router-center-all-info">
      <!-- 顶部功能 -->
      <div class="router-center-top-all-button-info">
        <el-row>
          <el-col :span="12">
            <el-button type="primary" @click="showRouterInfoMobile()">权限中心</el-button>
            <!-- <el-button type="success" @click="showRouterIcons()">图标管理</el-button> -->
          </el-col>
          <el-col :span="12" />
        </el-row>
      </div>
      <!-- 顶部功能区 -->
      <el-table
        :data="showRouterInfo"
        style="width: 100%"
        row-key="id"
        border
        fit
        :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
        :cell-style="tableAllStyle"
        :span-method="tableArraySpan"
      >
        <el-table-column
          label="序号"
          type="index"
          width="80"
          align="center"
          max-height="20"
        >
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="评分名称"
          min-width="15%"
          header-align="center"
        >
          <template slot-scope="scope">
            <span class="router-table-all-scope-name">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="项目管理员"
          min-width="15%"
          align="center"
        />
        <el-table-column
          prop="status"
          label="当前状态"
          min-width="10%"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">可见</span>
            <span v-else-if="scope.row.status === 2" class="table-row-info-warning-style">不可见</span>
          </template>
        </el-table-column>
        <el-table-column
          label="评分类型"
          min-width="10%"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.maxScore === 88888">不涉及评分</span>
            <span v-else-if="scope.row.maxScore=== 99999" class="table-row-info-warning-style">一票否决</span>
            <span v-else-if="scope.row.level==='1'">见下级</span>
            <span v-else-if="scope.row.listType===1" class="table-row-info-style">考核制</span>
            <span v-else-if="scope.row.listType===2" class="table-row-info-style">评分制</span>
            <span v-else-if="scope.row.listType===3" class="table-row-info-style">评分审核制</span>
            <span v-else-if="scope.row.listType===4" class="table-row-info-style">见下级</span>
          </template>
        </el-table-column>
        <el-table-column
          label="分值"
          min-width="10%"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.maxScore === 88888">不涉及评分</span>
            <span v-else-if="scope.row.maxScore=== 99999" class="table-row-info-warning-style">一票否决</span>
            <span v-else class="table-row-info-style">{{ scope.row.maxScore }}分</span>
          </template>
        </el-table-column>
        <el-table-column
          label="基础分"
          min-width="10%"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.maxScore === 88888">不涉及评分</span>
            <span v-else-if="scope.row.maxScore=== 99999" class="table-row-info-warning-style">一票否决</span>
            <span v-else class="table-row-info-style">{{ scope.row.baseScore }}分</span>
          </template>
        </el-table-column>
        <el-table-column
          label="评分"
          min-width="10%"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.maxScore === 88888">不涉及评分</span>
            <span v-else-if="scope.row.maxScore=== 99999" class="table-row-info-warning-style">一票否决</span>
            <span v-else-if="scope.row.level==='1'">见下级</span>
            <span v-else-if="scope.row.scoreType===1" class="table-row-info-style">加分制</span>
            <span v-else-if="scope.row.scoreType===2" class="table-row-info-style">扣分制</span>
            <span v-else-if="scope.row.scoreType===3" class="table-row-info-style">可加可扣</span>
          </template>
        </el-table-column>
        <el-table-column
          label="显示图标"
          min-width="10%"
          align="center"
        >
          <template slot-scope="scope">
            <e-icon :icon-name="scope.row.icon" />
            <!-- <img :src="scope.row.icon" class="router-table-all-scope-image"> -->
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="详情"
          min-width="10%"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="showUpdateRouter(scope.row)">更新</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 考勤信息详情 -->
      <router-admin ref="routerAdmin" @reloadInfo="reloadInfo" />
      <router-info-moblie ref="routerInfoMoblie" @reloadInfo="reloadInfo" />
      <router-icons ref="routerIcons" @reloadInfo="reloadInfo" />
    </div>
  </div>
</template>
<script>
import { EIcon } from 'e-icon-picker'
import 'e-icon-picker/lib/symbol.js' // 基本彩色图标库
import 'e-icon-picker/lib/index.css' // 基本样式，包含基本图标
import 'font-awesome/css/font-awesome.min.css' // font-awesome 图标库
import 'element-ui/lib/theme-chalk/icon.css' // element-ui 图标库
import { getAllRouter } from '../../api/user.js'
import { getAllJurisdiction } from '../../api/jurisdiction.js'
import routerAdmin from '../../components/adminRouterInfo/routerInfo.vue'
import routerInfoMoblie from '../../components/adminRouterInfo/routerInfoMoblie.vue'
import routerIcons from '../../components/adminRouterInfo/routerIcons.vue'
export default {
  name: 'App',
  components: {
    'router-admin': routerAdmin,
    'router-info-moblie': routerInfoMoblie,
    'router-icons': routerIcons,
    EIcon
  },
  data() {
    return {
      icon: '',
      options: {
        FontAwesome: true,
        ElementUI: true,
        eIcon: true, // 自带的图标，来自阿里妈妈
        eIconSymbol: true, // 是否开启彩色图标
        addIconList: [],
        removeIconList: []
      },
      // 动态数据存储位置
      showRouterInfo: [], // 存储的动态路由信息
      allJurisdiction: []// 全部路由信息
    //   页面信息存储位置
    }
  },
  created() {
    // 获取全部路由信息
    this.getAllRouterInfo()
    // 获取全部权限名称
    this.getAllJurisdictions()
  },
  methods: {
    // 获取全部路由信息
    getAllRouterInfo() {
      getAllRouter().then((res) => {
        // 动态路由加工存储
        this.getRouterTypeInfo(res.obj)
      })
    },
    // 动态路由加工
    getRouterTypeInfo(routerInfo) {
      var router = []
      var resRouter = routerInfo
      var allJurisdiction = this.allJurisdiction
      const resRouter1 = JSON.parse(JSON.stringify(resRouter).replace(/flistId/g, 'id'))
      const resRouter2 = JSON.parse(JSON.stringify(resRouter1).replace(/slistId/g, 'id'))
      const resRouter3 = JSON.parse(JSON.stringify(resRouter2).replace(/tlistId/g, 'id'))
      const resRouter4 = JSON.parse(JSON.stringify(resRouter3).replace(/flistName/g, 'name'))
      const resRouter5 = JSON.parse(JSON.stringify(resRouter4).replace(/slistName/g, 'name'))
      const resRouter6 = JSON.parse(JSON.stringify(resRouter5).replace(/tlistName/g, 'name'))
      const resRouter7 = JSON.parse(JSON.stringify(resRouter6).replace(/flistPath/g, 'path'))
      const resRouter8 = JSON.parse(JSON.stringify(resRouter7).replace(/slistPath/g, 'path'))
      const resRouter9 = JSON.parse(JSON.stringify(resRouter8).replace(/tlistPath/g, 'path'))
      const resRouter10 = JSON.parse(JSON.stringify(resRouter9).replace(/flistIconWeb/g, 'icon'))
      const resRouter11 = JSON.parse(JSON.stringify(resRouter10).replace(/slistIconWeb/g, 'icon'))
      const resRouter12 = JSON.parse(JSON.stringify(resRouter11).replace(/flistStatus/g, 'status'))
      const resRouter13 = JSON.parse(JSON.stringify(resRouter12).replace(/slistStatus/g, 'status'))
      const resRouter14 = JSON.parse(JSON.stringify(resRouter13).replace(/tlistStatus/g, 'status'))
      const resRouter15 = JSON.parse(JSON.stringify(resRouter14).replace(/flistPostTime/g, 'time'))
      const resRouter16 = JSON.parse(JSON.stringify(resRouter15).replace(/slistPostTime/g, 'time'))
      const resRouter17 = JSON.parse(JSON.stringify(resRouter16).replace(/tlistPostTime/g, 'time'))
      const resRouter18 = JSON.parse(JSON.stringify(resRouter17).replace(/tlistIconWeb/g, 'icon'))
      const resRouter19 = JSON.parse(JSON.stringify(resRouter18).replace(/slistUserType/g, 'type'))
      const resRouter20 = JSON.parse(JSON.stringify(resRouter19).replace(/tlistUserType/g, 'type'))
      const resRouter21 = JSON.parse(JSON.stringify(resRouter20).replace(/flistBaseScore/g, 'baseScore'))
      const resRouter22 = JSON.parse(JSON.stringify(resRouter21).replace(/slistBaseScore/g, 'baseScore'))
      const resRouter23 = JSON.parse(JSON.stringify(resRouter22).replace(/tlistBaseScore/g, 'baseScore'))
      const resRouter24 = JSON.parse(JSON.stringify(resRouter23).replace(/flistMaxScore/g, 'maxScore'))
      const resRouter25 = JSON.parse(JSON.stringify(resRouter24).replace(/slistMaxScore/g, 'maxScore'))
      const resRouter26 = JSON.parse(JSON.stringify(resRouter25).replace(/tlistMaxScore/g, 'maxScore'))
      const resRouter27 = JSON.parse(JSON.stringify(resRouter26).replace(/flistMinScore/g, 'minScore'))
      const resRouter28 = JSON.parse(JSON.stringify(resRouter27).replace(/slistMinScore/g, 'minScore'))
      const resRouter29 = JSON.parse(JSON.stringify(resRouter28).replace(/tlistMinScore/g, 'minScore'))
      const resRouter30 = JSON.parse(JSON.stringify(resRouter29).replace(/flistPostTime/g, 'postTime'))
      const resRouter31 = JSON.parse(JSON.stringify(resRouter30).replace(/slistPostTime/g, 'postTime'))
      const resRouter32 = JSON.parse(JSON.stringify(resRouter31).replace(/tlistPostTime/g, 'postTime'))
      const resRouter33 = JSON.parse(JSON.stringify(resRouter32).replace(/flistPosition/g, 'position'))
      const resRouter34 = JSON.parse(JSON.stringify(resRouter33).replace(/slistPosition/g, 'position'))
      const resRouter35 = JSON.parse(JSON.stringify(resRouter34).replace(/tlistPosition/g, 'position'))
      const resRouter36 = JSON.parse(JSON.stringify(resRouter35).replace(/slistScoreType/g, 'scoreType'))
      const resRouter37 = JSON.parse(JSON.stringify(resRouter36).replace(/tlistScoreType/g, 'scoreType'))
      const resRouter38 = JSON.parse(JSON.stringify(resRouter37).replace(/slistType/g, 'listType'))
      const resRouter39 = JSON.parse(JSON.stringify(resRouter38).replace(/tlistType/g, 'listType'))
      const resRouter40 = JSON.parse(JSON.stringify(resRouter39).replace(/slistInfo/g, 'listInfo'))
      const oldRouter = JSON.parse(JSON.stringify(resRouter40).replace(/tlistInfo/g, 'listInfo'))
      for (let i = 0; i < oldRouter.length; i++) {
        // 将一级路由信息添加到路由表中
        const flist = oldRouter[i].flist

        // 首页所有人可见
        const flistTypeName = []
        if (flist.id === 'FL58') {
          flistTypeName.push('所有人可见')
        } else {
          flistTypeName.push('见下级')
        }
        flist.id = oldRouter[i].flist.id
        flist.typeName = flistTypeName
        flist.level = '1'
        flist.child = []
        // 将二三级路由进行拼接
        for (let j = 0; j < oldRouter[i].slists.length; j++) {
          // 添加当前二级路由
          const slist = oldRouter[i].slists[j].slist
          // 将二级路由权限做处理
          const slistType = oldRouter[i].slists[j].slist.type.split(',')
          const slistTypeName = []
          if (slistType[0] === 'a') {
            slistTypeName.push('所有人可见')
          } else if (slistType[0] === 'b') {
            slistTypeName.push('见下级')
          } else {
            for (let y = 0; y < slistType.length; y++) {
              for (let u = 0; u < allJurisdiction.length; u++) {
                if (slistType[y] === allJurisdiction[u].jurisdictionId) {
                  slistTypeName.push(allJurisdiction[u].jurisdictionName)
                }
              }
            }
          }

          slist.typeName = slistTypeName
          slist.level = '2'
          slist.child = []
          // 添加三级路由信息
          for (let x = 0; x < oldRouter[i].slists[j].tlist.length; x++) {
            const tlist = oldRouter[i].slists[j].tlist[x]
            // 将三路由权限做处理
            const tlistType = oldRouter[i].slists[j].tlist[x].type.split(',')
            const tlistTypeName = []
            for (let y = 0; y < tlistType.length; y++) {
              for (let u = 0; u < allJurisdiction.length; u++) {
                if (tlistType[y] === allJurisdiction[u].jurisdictionId) {
                  tlistTypeName.push(allJurisdiction[u].jurisdictionName)
                }
              }
            }
            tlist.typeName = tlistTypeName
            tlist.level = '3'
            slist.child.push(tlist)
          }
          // 将拼接好的二三级路由添加到一级路由中
          flist.child.push(slist)
        }
        // 将一级路由添加到router中
        router[i] = flist
      }
      this.showRouterInfo = router
    },
    // 更新路由信息
    showUpdateRouter(routerInfo) {
      this.$refs.routerAdmin.showDialog(routerInfo)
    },
    // 删除路由信息
    delRouter(routerInfo) {

    },
    showRouterInfoMobile() {
      this.$refs.routerInfoMoblie.showDialog()
    },
    showRouterIcons() {
      this.$refs.routerIcons.showDrawer()
    },
    // 获取全部权限名称
    getAllJurisdictions() {
      getAllJurisdiction().then((res) => {
        this.allJurisdiction = res.obj
      })
    },
    // 页面逻辑存储位置
    // 自定义表格列颜色
    tableAllStyle({ row, column, rowIndex, columnIndex }) {
      const returnInfo = []
      // 定义列
      if (columnIndex === 1 || columnIndex === 3 || columnIndex === 5 || columnIndex === 7 || columnIndex === 9) {
        if (row.id === 'FL58') {
          returnInfo.push('text-align:center')
        }
        returnInfo.push('background:rgba(150, 154, 184,0.05)')
      }
      // 定义行
      if (row.level === '2') {
        returnInfo.push('background:#EBEEF5')
      } else if (row.level === '3') {
        returnInfo.push('background:#F2F6FC')
      }
      return returnInfo.join(';')
    },
    // 单元格合并
    tableArraySpan({ row, column, rowIndex, columnIndex }) {
      if (row.maxScore === 88888 || row.maxScore === 99999) {
        if (columnIndex === 4) {
          return [1, 4]
        } else if (columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
          return [0, 0]
        }
      }
    },
    reloadInfo() {
      this.getAllRouterInfo()
    }
  }

}
</script>
<style lang="scss" scoped>
.router-top-info{
    font-size: 1.5rem;
    text-align: center;

}
.router-center-all-info{
    width: 95%;
    margin: 0 auto;
    margin-top: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 0.8rem;
    text-align: center;
}
.router-table-all-scope-image{
    width: 1rem;
    margin-right: 0.3rem;
}
.table-row-info-style{
    color: #409EFF;
    font-weight: 500;
    font-size: 1rem;
}
.table-row-info-warning-style{
    color: #F56C6C;
}
.router-center-top-all-button-info{
    text-align: left;
    margin-bottom: 2rem;
}

</style>
